$color-primary: #409EFF;
$color-primary-active: #409EFF;

$color-sidebar: #545c64;                 // 侧边栏背景色
$color-sidebar-active: #434a50;          // 侧边栏Hover背景色
$color-sidebar-text: #bfcbd9;            // 侧边栏文本颜色
$color-sidebar-text-active: #ffd04b;     // 侧边栏激活颜色
$color-sidebar-submenu-active: #f4f4f5;  // 子菜单内有元素被选中时菜单标题颜色

//$color-sidebar: #304156;                 // 侧边栏背景色
//$color-sidebar-active: #263445;          // 侧边栏Hover背景色
//$color-sidebar-text: #bfcbd9;            // 侧边栏文本颜色
//$color-sidebar-text-active: #409EFF;     // 侧边栏激活颜色
//$color-sidebar-submenu-active: #f4f4f5;  // 子菜单内有元素被选中时菜单标题颜色

//$color-sidebar: #ffffff;
//$color-sidebar-active: #ecf5ff;
//$color-sidebar-text: #717a80;
//$color-sidebar-text-active: #409EFF;
//$color-sidebar-submenu-active: #050505;

$color-navbar: linear-gradient(90deg, #1d42ab, #2173dc, #1e93ff);
$color-navbar-active: #409eff;

$color-background-color-base: #f5f7fa;


:root {
  --bai-color-primary: $color-primary;
  --bai-color-primary-active: $color-primary-active;

  --bai-color-sidebar: $color-sidebar;
  --bai-color-sidebar-active: $color-sidebar-active;
  --bai-color-sidebar-text: $color-sidebar-text;
  --bai-color-sidebar-text-active: $color-sidebar-text-active;
  --bai-color-sidebar-submenu-active: $color-sidebar-submenu-active;


  --bai-color-navbar: $color-navbar;
  --bai-color-navbar-active: $color-navbar-active;

  --bai-color-background-color-base: $color-background-color-base;
}

// 可实现js中的引用
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
  colorPrimary: $color-primary;
  colorPrimaryActive: $color-primary-active;

  colorSidebar: $color-sidebar;
  colorSidebarActive: $color-sidebar-active;
  colorSidebarText: $color-sidebar-text;
  colorSidebarTextActive: $color-sidebar-text-active;
  colorSidebarSubmenuActive: $color-sidebar-submenu-active;

  colorNavbar: $color-navbar;
  colorNavbarActive: $color-navbar-active;

  colorBackgroundColorBase: $color-background-color-base;
}

